<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
<style>



    .box1{

        /* 
        颜色单位:
            在CSS中可以直接使用颜色来设置各种颜色
                不如:red.orange,yellow ~~~``````````
                但是在CSS中直接使用颜色名是非常的不方便

            RGB值:
                -RGB通过是那种颜色的不同浓度来调配不同的颜色
                -R red,G green B blue
                -每一种颜色的范围在0-255(0%-100%)之间
            RGBA:
                -就是在rgb的基础上增加了一个a表示不透明度
                -需要4个值,前三个和rgb一样,第四个表示不透明度
                    1表示完全不透明 0表示完全透明 .5半透明

            十六进制的RGB值:
                -语法:#红色绿色蓝色
                -颜色浓度通过00-ff
                -如果颜色两位重复可以进行简写
                    #aabbcc--#abc
        
            HSL值 HSLA值
                -色相(0-360)
                -饱和度,颜色的浓度 0% - 100%
                -亮度,颜色的亮度 0% - 100%
        */

        width: 100px;
        height: 100px;
        background-color: red;
        background-color:rgb(1, 4, 255) ;
        background-color:rgba(186,255,168,.1);
        background-color: #ff0000;
        background-color: #f00;
        background-color: red;
        background-color: red;
        background-color: red;
        background-color: red;
        background-color: rgb(170, 172, 223)1;
        background-color: hsl(1, 48%, 48%);
    }
</style>

</head>
<body>
    
    <div class="box1">

    </div>

</body>
</html>